<template>
  <div class="px-[16px] pt-[16px] bg-[#fff] rounded-[8px]">
    <FormTitle title="付款信息" />
    <el-form
      ref="formRef"
      label-position="top"
      label-width="100px"
      :model="formData"
      class="form-components"
      :inline="true"
      :rules="rules"
    >
      <el-form-item label="物流商付款单号">
        <el-input
          v-model="formData.logistics_pay_number"
          :style="styleWidth"
          disabled
        />
      </el-form-item>
      <el-form-item label="申请项目">
        <el-select
          v-model="formData.rp_type"
          placeholder="请选择申请项目"
          clearable
          :style="styleWidth"
          filterable
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in optionsDataAll.finance_rp_type"
            :key="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="付款账户">
        <el-select
          v-model="formData.pay_account_id"
          placeholder="请选择付款账户"
          clearable
          :style="styleWidth"
          filterable
          @change="handleAccount"
        >
          <el-option
            :label="item.alipay_account"
            :value="item.aa_id"
            v-for="item in dict.alipayAccount"
            :key="item.aa_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="银行账号">
        <el-select
          v-model="formData.pay_account_id"
          placeholder="请选择银行账号"
          clearable
          :style="styleWidth"
          filterable
          @change="handleAccount"
        >
          <el-option
            :label="item.alipay_account"
            :value="item.aa_id"
            v-for="item in dict.alipayAccount"
            :key="item.aa_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="物流商名称" prop="logistics_id">
        <el-select
          v-model="formData.logistics_id"
          placeholder="请选择物流商名称"
          filterable
          :disabled="true"
          :style="styleWidth"
          @change="handleLogistics"
        >
          <el-option
            :label="item.logistics_name"
            :value="item.id"
            v-for="item in dict.logisticsData"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="付款主体公司" prop="pay_main_company">
        <el-select
          v-model="formData.pay_main_company"
          placeholder="请选择付款主体公司"
          clearable
          filterable
          :style="styleWidth"
          
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in optionsDataAll.finance_lpo_pay_main_company"
            :key="item.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="付款方式" prop="pay_type">
        <el-select
          v-model="formData.pay_type"
          placeholder="请选择付款方式"
          clearable
          :disabled="true"
          filterable
          :style="styleWidth"
          
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in optionsDataAll.finance_lpo_pay_type"
            :key="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="来源">
        <el-select v-model="formData.source_type" disabled :style="styleWidth">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in optionsDataAll.finance_lpo_source_type"
            :key="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="账期" prop="settle_type">
        <el-select
          v-model="formData.settle_type"
          :disabled="true"
          :style="styleWidth"
        >
          <el-option
            :label="item.bp_name"
            :value="item.logistics_bp_config_id"
            v-for="item in optionsDataAll.bp_config"
            :key="item.logistics_bp_config_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="人民币金额">
        <el-input-number
          v-model="formData.req_amount_cny"
          :controls="false"
          clearable
          :style="styleWidth"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="申请人">
        <el-input
          v-model="formData.apply_user_name"
          :disabled="true"
          :style="styleWidth"
        />
      </el-form-item>
      <el-form-item label="期望付款日期">
        <el-date-picker
          v-model="formData.expected_pay_date"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择日期"
          :style="styleWidth"
        />
      </el-form-item>
      <el-form-item label="原始账单">
        <div style="width: 720px">
          <el-link
            :underline="false"
            type="primary"
            @click="handleLink(formData?.original_bill_file?.[0]?.oss_path || null)"
          >
            {{ formData?.original_bill_file?.[0]?.filename || "-" }}
          </el-link>
        </div>
      </el-form-item>
    </el-form>
    <div class="text-label">物流备注</div>
    <el-input
      v-model="formData.logistics_remark"
      :autosize="{ minRows: 2, maxRows: 4 }"
      type="textarea"
      placeholder="请输入物流备注"
      class="mb-[10px]"
    />
    <el-form-item>
      <Upload
        label="附件"
        v-model="formData.attachments"
      >
      </Upload>
    </el-form-item>
    <el-checkbox v-model="formData.audit_type" label="飞书审批" />
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import FormTitle from "@/components/Form/FormTitle.vue";
import { useEnumSelect } from "@/hooks";
import {
  logisticsList,
  logisticsFinance,
  logisticsBpConfig,
} from "../../../api/index";
import { getCurrency, getAlipayAccountList } from "@/api/public.js";
import Upload from "@/components/Upload/index.vue";
import { getPayAccount } from "@/api/public.js";
const props = defineProps({
  data: { type: Object, default: () => ({}) },
  paymenFlage: { type: Boolean, default: false },
});
const { paymenFlage } = toRefs(props);
const emit = defineEmits(["submit"]);
const formRef = ref();
const { options: optionsData } = useEnumSelect({
  params: [
    "finance_lpo_pay_type",
    "finance_settle_type",
    "finance_lpo_pay_main_company",
    "finance_audit_type",
    "finance_lpo_source_type",
    "finance_rp_type",
  ],
});
const optionsDataAll = computed(() =>
  Object.assign({}, optionsData.value, optionsData1.value, optionsData2.value)
);
const optionsData1 = ref({});
const getPay = async () => {
  const { data } = await getPayAccount({ type: "payment" });
  optionsData1.value = data || {};
};
const optionsData2 = ref({});
const logisticsBpConfigList = async () => {
  const { data } = await logisticsBpConfig();
  optionsData2.value.bp_config = data;
};
logisticsBpConfigList();
onMounted(() => {
  getPay();
});
const formData = ref({
  id: null,
  logistics_pay_number: null,
  rp_type: null,
  pay_account_id: null,
  pay_account_name: null,
  pay_bank_account: null,
  logistics_id: null,
  logistics_name: null,
  pay_main_company: null,
  pay_type: null,
  logistics_finance_id: null,
  collect_account_name: null,
  source_type: 1,
  settle_type: null,
  logistics_remark: null,
  audit_type: 0,
  expected_pay_date: null,
  finance_remark: null,
  create_user_name: null,
  pay_account: null,
});

watch(
  () => props.data,
  (val) => {
    if (!val) return;
    formData.value = val
    formData.value.req_amount_cny = Number(props?.data?.req_amount_cny || 0);
    const { pay_receipts, attachments, original_bill_file } = props.data;
    formData.value.pay_receipts = pay_receipts?.oss_path
      ? [
          {
            name: pay_receipts.filename,
            url: pay_receipts.oss_path,
            source_name: pay_receipts.filename,
            response: {
              ...pay_receipts,
            },
          },
        ]
      : [];
    formData.value.attachments = attachments?.oss_path
      ? [
          {
            name: attachments.filename,
            url: attachments.oss_path,
            source_name: attachments.filename,
            response: {
              ...attachments,
            },
          },
        ]
      : [];
    formData.value.original_bill_file = original_bill_file;
  }
);
const dict = reactive({
  logisticsData: [],
  logisticsFinanceData: [],
  currencyData: [],
});
//获取物流商
const getlogistics = () => {
  logisticsList({}).then((res) => {
    dict.logisticsData = res?.data || [];
  });
};
getlogistics();
const handleLogistics = (val) => {
  let obj = dict.logisticsData?.find((item) => {
    return item.id === val;
  });
  console.log(obj);
  const { pay_type, logistics_name, logistics_bp_config_id } = obj;
  formData.value.collect_account_name = null;
  formData.value.settle_type = logistics_bp_config_id || null;
  formData.value.logistics_name = logistics_name || null;
  formData.value.pay_type = pay_type || null;
  formData.value.logistics_finance_id = null;
  if (!obj?.id) return;
  getLogisticsFinance({ logistics_id: obj.id });
};
const getLogisticsFinance = (id) => {
  logisticsFinance(id).then((res) => {
    dict.logisticsFinanceData = res?.data || [];
  });
};
const handleLogisticsFinance = (val) => {
  let obj = dict.logisticsFinanceData?.find((item) => {
    return item.account_name === val;
  });
  const { logistics_finance_id } = obj;
  formData.value.logistics_finance_id = logistics_finance_id || null;
  if (!obj?.logistics_finance_id) return;
};
const handleAccount = (val) => {
  let obj = dict.alipayAccount?.find((item) => {
    return item.aa_id === val;
  });
  const { alipay_account } = obj;
  formData.value.pay_account_name = alipay_account;
  formData.value.pay_bank_account = alipay_account;
};
const currencyList = () => {
  getCurrency({}).then((res) => {
    dict.currencyData = res?.data || [];
  });
};
currencyList();
const alipayAccountList = () => {
  getAlipayAccountList({}).then((res) => {
    dict.alipayAccount = res?.data || [];
  });
};
alipayAccountList();
const styleWidth = { width: "380px" };
const rules = reactive({
  logistics_id: [
    { required: true, message: "请选择物流商名称", trigger: "change" },
  ],
  logistics_finance_id: [
    { required: true, message: "请选择收款单位", trigger: "change" },
  ],
  pay_main_company: [
    { required: true, message: "请选择付款主体公司", trigger: "change" },
  ],
  pay_type: [{ required: true, message: "请选择付款方式", trigger: "change" }],
  settle_type: [
    { required: true, message: "请选择结算类型", trigger: "change" },
  ],
  pay_receipts: [
    { required: true, message: "请上传付款凭证", trigger: "change" },
  ],
  collect_account_name: [
    { required: true, message: "请选择收款单位", trigger: "change" },
  ],
  pay_account: [
    { required: true, message: "请选择支付账号", trigger: "change" },
  ],
});

const submit = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid) => {
      let _model = JSON.parse(JSON.stringify(formData.value));
      _model.attachments = _model.attachments?.[0].response || [];
      _model.pay_receipts = [];
      console.log(_model);
      if (valid) {
        resolve(_model);
      } else {
        reject(false);
      }
    });
  });
};
const handleLink = (_link) => {
  if (!_link) return;
  window.open(_link, "noopener", "noreferrer");
};
const resetForm = () => {
  // model.value = JSON.parse(JSON.stringify(props.data))
  formRef.value.resetFields();
};
defineExpose({
  submit,
  resetForm,
});
</script>

<style lang="scss" scoped>
.form-components {
  &.line {
    border-bottom: 1px solid #eff3fe;
  }

  :deep(.el-form-item--default) {
    margin-bottom: 16px;
  }
}
.text-label {
  font-size: 14px;
  font-weight: 700;
  color: #606266;
  margin-bottom: 8px;
}
</style>
